﻿<MTimeline AlignTop
           Dense="false">
    @foreach (var item in _items)
    {
        <MTimelineItem Color="@item.Color"
                       Icon="@item.Icon"
                       FillDot>
            <MCard Color="@item.Color"
                    Dark>
                <MCardTitle Class="text-h6">
                    Lorem Ipsum Dolor
                </MCardTitle>
                <MCardText Class="white text--primary">
                    <p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</p>
                    <MButton Color="@item.Color"
                           Class="mx-0"
                           Outlined>
                        Button
                    </MButton>
                </MCardText>
            </MCard>
        </MTimelineItem>
    }
</MTimeline>

@code{
    private List<Item> _items = new List<Item>
    {
       new Item 
       {
          Color= "red lighten-2",
          Icon= "mdi-star",
       },
        new Item
        {
          Color= "purple darken-1",
          Icon= "mdi-book-variant",
        },
        new Item
        {
          Color= "green lighten-1",
          Icon= "mdi-airballoon",
        },
        new Item
        {
          Color= "indigo",
          Icon= "mdi-gate-buffer",
        }
    };

    class Item
    {
        public string Color { get; set; }
        public string Icon { get; set; }
    }
}